<%@ page import="com.hf.constant.OrderLunchConst"%>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainUser">
<title>Today Order Status</title>
</head>
<body>
	<div id="container">
		<h2>Your order status today:</h2>
		<div id="status" class="dataDiv">
			${todayOrderStatus ? 'Ordered' : 'Not Ordered'}
		</div>

		<div class="dataDiv">
			<input type="button" class="btn" id="order" value="Order Now" style="display:none"/> <input
				type="button" class="btn" id="cancel" value="Cancel Order" style="display:none"/>
		</div>

		<div>
			Note: Can't operate after
			${ OrderLunchConst.FETCH_EMAIL_CLOCK}
			o'clock.
		</div>
	</div>
	<jq:jquery>
		if (${todayOrderStatus}) {
			$('#cancel').show();
		} else {
			$('#order').show();
		}
	
		$('#order').live('click',function(e){
			e.preventDefault();
			$.ajax({
				type:'POST',
				url: '/orderLunch/userOrderHistory/order',
				success:function(result){
					if(result.success){
						$('#status').text('Ordered');
						$('#order').hide();
						$('#cancel').show();
					}
					alert(result.message);
				}
			});
		});
		$('#cancel').live('click',function(e){
			e.preventDefault();
			$.ajax({
				type:'POST',
				url: '/orderLunch/userOrderHistory/cancel',
				success:function(result){
					if(result.success){
						$('#status').text('Not Ordered');
						$('#order').show();
						$('#cancel').hide();
					} 
					alert(result.message);
				}
			});
		});
	</jq:jquery>
</body>
</html>